<!DOCTYPE html>
<html lang="ja-JP">
<head>
<meta charset="UTF-8">
<title>RingReef-Extension Options</title>

<link rel="stylesheet" type="text/css" href="rrext.css">
<script type="text/javascript" src="rrext_option_config.js"></script>
<script type="text/javascript">

</script>
</head>
<body class="option">
<div class="option-header">
	<img class="logo" src="img/icon48.png"/>
	<h1>RingReef-Extension Options</h1>
</div>
<div class="option-container">
	<div id="HideDeletedMessage" class="option-pane">
		<div class="option-name">Hide deleted message</div>
		<div class="option-value">
			<input type="checkbox"/>Hide
		</div>
		<div class="option-reload">Need to reload ringreef.com tabs after changing.</div>
	</div>
	<div id="EnableShiftEnter" class="option-pane">
		<div class="option-name">Enable Shift+Enter key to send message</div>
		<div class="option-value">
			<input type="checkbox"/>Enable
		</div>
		<div class="option-reload">Need to reload ringreef.com tabs after changing.</div>
	</div>
	<div id="EnableCtrlEnter" class="option-pane">
		<div class="option-name">Enable Ctrl+Enter key to send message</div>
		<div class="option-value">
			<input type="checkbox"/>Enable
		</div>
		<div class="option-reload">Need to reload ringreef.com tabs after changing.</div>
	</div>
	<div id="MessageTemplateDefault" class="option-pane">
		<div class="option-name">Template for copying message.</div>
		<div class="option-value">
			<textarea name="" cols="50" rows="5"></textarea>
		</div>
	</div>
	<div id="MessageTemplateWithImage" class="option-pane">
		<div class="option-name">Template for copying message with image.</div>
		<div class="option-value">
			<textarea name="" cols="50" rows="5"></textarea>
		</div>
	</div>
</div>
<script type="text/javascript">
var optionPanes = document.querySelectorAll('.option-pane');
function writeOption(option, block) {
	return function() {
		var optionPane = document.querySelector('#'+option.name+'.option-pane');
		var messageDialog = document.createElement('div');
		messageDialog.className = 'message-dialog';
		optionPane.appendChild(messageDialog);
		try {
			block.call(this, option);
			messageDialog.className = 'message-dialog success';
		} catch(e) {
			messageDialog.className = 'message-dialog error';
		} finally {
			messageDialog.addEventListener('webkitAnimationEnd', function(){
				optionPane.removeChild(messageDialog);
			});
		}
	};
};
for (var i in optionPanes) {
	var optionPane = optionPanes[i];
	var option = rrext.OPTION[optionPane.id];
	if (option instanceof rrext.option.BoolOption) {
		optionPane.classList.add('bool');
		var checkbox = optionPane.querySelector('.option-value input[type="checkbox"]');
		checkbox.checked = option.read();
		checkbox.addEventListener('change', writeOption(option, function(option){
			//console.log('this', this, this.checked);
			option.write(this.checked);
		}));
	} else if (option instanceof rrext.option.TextOption) {
		optionPane.classList.add('text');
		var textarea = optionPane.querySelector('.option-value textarea');
		textarea.value = option.read();
		textarea.addEventListener('change', writeOption(option, function(option){
			//console.log('this', this, this.value);
			option.write(this.value);
		}));
	}
}
</script>
</body>
</html>